<script setup lang="ts">
import { defineProps, ref, watch } from "vue"
import { FormInst, NModal, NForm, NFormItem, NInputNumber } from "naive-ui"

const props = defineProps<{
  showModal: boolean
  modalSubmit: (data: any) => void
  modalClose: () => void
  priceData: any
}>()

const formRef = ref<FormInst | null>(null)
const formValue = ref({
  priceCost: 0,
  priceDiscounts: 0,
  priceSeckill: 0,
})

const rules = {
  priceCost: {
    required: true,
    message: "请输入成本价",
  },
  priceDiscounts: {
    required: true,
    message: "请输入优惠价",
  },
  priceSeckill: {
    required: true,
    message: "请选择秒杀价",
  },
}

//弹窗确认
const modalOnOk = () => {
  formRef.value?.validate(errors => {
    if (!errors) {
      props.modalSubmit({ orderId: props.priceData?.orderId, ...formValue.value })
      formValue.value = {
        priceCost: 0,
        priceDiscounts: 0,
        priceSeckill: 0,
      }
    }
  })
}
//弹窗关闭
const modalCancel = () => {
  props.modalClose()
  formValue.value = {
    priceCost: 0,
    priceDiscounts: 0,
    priceSeckill: 0,
  }
}

//编辑分类的监听回调
watch(
  () => props.priceData,
  (newValue, oldValue) => {
    formValue.value = newValue
  },
  {
    deep: true,
  }
)
</script>

<template>
  <div class="modal">
    <n-modal :show="props.showModal" preset="dialog" title="编辑秒杀价" positive-text="确认" negative-text="取消"
      @positive-click="modalOnOk" @negative-click="modalCancel" :show-icon="false" :on-close="modalCancel"
      :on-mask-click="modalCancel">
      <n-form ref="formRef" label-placement="left" :model="formValue" :rules="rules">
        <n-form-item label="成本:" path="priceCost">
          <n-input-number clearable min="0" class="form_item" v-model:value="formValue.priceCost" :disabled="true"
            placeholder="请填写商品价格" />
        </n-form-item>
        <n-form-item label="优惠价:" path="priceDiscounts">
          <n-input-number clearable min="0" class="form_item" v-model:value="formValue.priceDiscounts" :disabled="true"
            placeholder="请填写商品价格" />
        </n-form-item>
        <n-form-item label="秒杀价:" path="priceSeckill">
          <n-input-number clearable min="0" class="form_item" v-model:value="formValue.priceSeckill"
            placeholder="请填写商品价格" />
        </n-form-item>
      </n-form>
    </n-modal>
  </div>
</template>

<style lang="scss" scoped>
.form_item {
  width: 100px;
}
</style>
